﻿@{
    var data = ViewData.Model;

    <table>
        <thead>
            <h4>Users</h4>
            <th></th>
            <th>Name</th>
            <th>Created Date</th>
            <th>Last Login</th>
            <th>Is Enabled</th>        
            <th></th>
            <th></th>
        </thead>

    @foreach (BooksOnline.User user in data)
    { 
        <tr>
            <td>
                <input type="button" id="cmdShowRoles" value="Show roles">
                <input type="hidden" id="hdnUserId" value=@user.Id />
            </td>
            <td>@user.Name</td>
            <td>@user.CreatedDate</td>
            <td>@user.LastLogin</td>
            <td>@user.IsEnabled</td>        
            <td>@Html.ActionLink("Edit", "Edit","User")</td>
            <td>@Html.ActionLink("Delete", "Delete","User")</td>
        </tr>    
    }

    </table>
    
    <table id="associatedRole">
        <thead>
            <h4>Associated role</h4>
        </thead>
    </table>
}


@if (false) { 
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}

<script type="text/javascript">
    $(document).ready(function () {
        $("input[id='cmdShowRoles']").click(ShowRoles);

    });

    // This function shows the associated role for a user
    // Currently it supports showing only one role
    var ShowRoles = function () {
        var user = {};
        user.UserId = $(this).parent().find("input[id='hdnUserId']").val();
        $.post("ShowRoles", user, UpdateRoles, "json");
    };

    var UpdateRoles = function (data) {
        $("#associatedRole .addedRow").remove();
        $("#associatedRole").append("<tr class='addedRow'><td>" + data.RoleName + "</td></tr>");
    };
    
</script>